<!--
 * @Author: SeonHu
 * @Date: 2025-09-28 12:52:38
 * @LastEditors: Seon.Hu
 * @LastEditTime: 2025-10-22 15:45:08
 * @FilePath: \bg-vben\src\views\dashboard\analysis\components\GrowCard.vue
 * @Description: 
 * Copyright © 2020-2025 SANQING Corporation, All rights reserved.
-->
<template>
  <div class="md:flex">
    <template v-for="(item, index) in growCardList" :key="item.title">
      <Card
        size="small"
        :loading="loading"
        :title="item.title"
        class="w-full md:!mt-0 md:w-1/4"
        :class="{ 'md:!mr-4': index + 1 < 4, '!mt-4': index > 0 }"
      >
        <template #extra>
          <Tag :color="item.color">{{ item.action }}</Tag>
        </template>

        <div class="flex items-center justify-between px-4 py-4">
          <CountTo prefix="$" :start-val="1" :end-val="item.value" class="text-2xl" />
          <Icon :icon="item.icon" :size="40" />
        </div>

        <div class="flex justify-between p-2 px-4">
          <span>总{{ item.title }}</span>
          <CountTo prefix="$" :start-val="1" :end-val="item.total" />
        </div>
      </Card>
    </template>
  </div>
</template>
<script lang="ts" setup>
  import { CountTo } from '@/components/CountTo/index';
  import Icon from '@/components/Icon/Icon.vue';
  import { Card, Tag } from 'ant-design-vue';

  import { growCardList } from '../data';

  defineProps({
    loading: {
      type: Boolean,
    },
  });
</script>
